<template>
  <div id="detail" class="detail">
    <yd-navbar slot="navbar" fixed>
      <a @click="$router.go(-1)" slot="left">
        <yd-navbar-back-icon></yd-navbar-back-icon>
      </a>
      <span slot="center" style="font-size:18px;">商品详情</span>
      <router-link to="/cart" slot="right">
        <yd-icon name="shopcart-outline" size="25px" color="#777"></yd-icon>
      </router-link>
    </yd-navbar>

    <div class="content-detail">
      <!-- 轮播图 -->
      <yd-slider style="height:50%">
        <yd-slider-item v-for="item in lunbo">
          <a href="#">
            <img :src="item">
          </a>
        </yd-slider-item>
      </yd-slider>
      <!-- 产品细节 -->
      <yd-lightbox class="ss">
        <yd-lightbox-img v-for="item in list" :src="item.src"></yd-lightbox-img>
      </yd-lightbox>
      <!-- title -->
      <div class="detailText">
        <span class="title">{{msg.name}}{{msg.detail}}{{msg.subtitle}}</span>
        <router-link to="#" slot="right" style="width:20%;">
          <div>
            <yd-icon name="share1" size="20px" color="#777"></yd-icon>
          </div>
          <div>
            <span class="list-del-price">分享</span>
          </div>
        </router-link>
        <yd-list-other slot="other">
          <div>
            <span style="color:#FF4040;font-weight:500px;font-size:15px;margin-left:5px;"><em>¥</em> {{msg.price}}</span>
            <span class="list-del-price">【{{msg.subtitle}}】</span>
          </div>
        </yd-list-other>
        <yd-grids-group class="text" :rows="3" title="">
          <yd-grids-item>
            <span slot="text">全场包邮</span>
          </yd-grids-item>
          <yd-grids-item>
            <span slot="text">退货无忧</span>
          </yd-grids-item>
          <yd-grids-item>
            <span slot="text">正品保证</span>
          </yd-grids-item>
        </yd-grids-group>
      </div>
      <!-- 规格参数 -->

      <router-link to="#">
        <yd-cell-item style="background-color: #fff;margin-bottom:2px;">
          <span slot="left">产品参数</span>
          <div slot="right">
            <yd-icon name="more" size="15px" color="#ccc"></yd-icon>
          </div>
        </yd-cell-item>
      </router-link>

      <!-- 商品详情 -->
      <div style="height:500px;background-color: #fff;">
        <span slot="center" style="font-size:12px;">—— 图文详情 ——</span>
        <yd-list theme="5">
          <yd-list-item v-for="item in list">
            <img slot="img" :src="item.src">
          </yd-list-item>
        </yd-list>
      </div>

      <!-- footer -->
      <yd-tabbar slot="tabbar" activeColor="#FF4040" fixed exact activeClass>
        <yd-tabbar-item title="客服" link="/">
          <yd-icon name="weixin" slot="icon" size="0.5rem"></yd-icon>
        </yd-tabbar-item>
        <yd-tabbar-item title="收藏" link="/cart">
          <yd-icon name="star-outline" slot="icon" size="0.5rem"></yd-icon>
        </yd-tabbar-item>
        <div class="button-group">
          <yd-button type="warning" style="margin-right:10px;" @click.native="addCart">加入购物车</yd-button>
          <yd-button type="danger" @click.native="buyNow()">立即购买</yd-button>
        </div>
      </yd-tabbar>
    </div>

  </div>
</template>

<script>
  import axios from '../../axios'
  import baseService from '../../axios/'

  export default {
    name: 'detail',
    data() {
      return {
        msg: {
          name: '粉色针织衫粉色针织衫粉色针织衫针织衫float:left;',
          price: '55',
          subtitle: '秋季新款',
          subImages: 'http://image.mall.com/86a2d057-df32-4141-83c0-8443bf2e9fcb.jpg',
          detail: '文艺，森女系',
        },
        lunbo: [
          // "http://image.mall.com/066d2363-a9e4-4281-9aa6-5b6fa124ab3c.jpg",
          // 'http://image.mall.com/e1a26247-841f-4d92-b829-719a94703c9e.jpg',
          // 'http://image.mall.com/0c3ed21e-3908-459f-b6fd-e82e43f91eb2.jpg'
        ],
        list: [{
            src: ''
          },
          {
            src: ''
          },
          {
            src: ''
          },
          {
            src: ''
          },
          {
            src: ''
          },
          {
            src: ''
          },
          {
            src: ''
          },
          {
            src: ''
          },
          {
            src: ''
          },
          {
            src: ''
          },
          {
            src: ''
          }
        ]
      }
    },
    mounted() {
      this.getProductDetail()
    },
    computed: {
      goodsNow() {
        return this.$store.store.state.goodsNow
      }
      // ,
      // buy() {
      //   return this.$store.store.state.buy
      // }
    },
    methods: {
      setGoodsNow(value) {
        this.$store.store.commit('setGoodsNow',value)
      },
      getProductDetail() {
        let param = new URLSearchParams();
        let productId = this.$store.store.state.goodsId;
        param.append("productId", productId);
        baseService.post('/product/detail.do', param).then((res) => {
          this.msg = res.data.data;
          this.setGoodsNow(res.data.data);
          // console.log(this.$store.store.state.goods)
          this.lunbo = res.data.data.subImages.split(",");
          let mylength = res.data.data.subImages.split(",").length;
          this.list.length = this.lunbo.length
          for (let i = 0; i < mylength; i++) {
            this.list[i].src = this.lunbo[i]
          }
        })
      },
      buyNow(){
        //立即购买：将该商品加入购物车（如果有，数量加一，如果没有，类型加一），且完成购物车商品选中id为当前商品id.
        let param = new URLSearchParams();
        let productId = this.$store.store.state.goodsId;
        param.append("productId", productId);
        param.append("count", 1);
        baseService.post('/cart/add.do', param).then((res) => {
          if (res.data.status == 10) {
            this.$dialog.alert({
              mes: res.data.msg
            });
            this.$router.push({
              path: '/user/login'
            })
          }
          if (res.data.status == 0) {
            //跳转到购物车页面，并选中当前id的商品。（当前商品的序号）
            // this.$store.store.state.orderGoodsIds = [];
            let dataList = res.data.data.cartProductVoList;
            let length = dataList.length;
            //遍历找到序号
            for(let i=0 ; i< length ; i++){
              if(dataList[i].productId == productId ){
                this.$store.store.state.cartClickList = [];
                this.$store.store.state.cartClickList.push(i);
                console.log("全局选中序号列表：",this.$store.store.state.cartClickList)
              }
            }
            // this.$store.store.state.orderGoodsIds = res.data.data.cartProductVoList[0].id;
            this.$router.push({
              path: '/cart'
            })
            // console.log("立即购买的返回结果：",res.data.data)
            // console.log(res.data.data.cartProductVoList.length)
          }
        })
      },
      addCart() {
        let param = new URLSearchParams();
        let productId = this.$store.store.state.goodsId;
        param.append("productId", productId);
        param.append("count", 1);
        baseService.post('/cart/add.do', param).then((res) => {
          if (res.data.status == 10) {
            this.$dialog.alert({
              mes: res.data.msg
            });
            this.$router.push({
              path: '/user/login'
            })
          }
          if (res.data.status == 0) {
            this.$dialog.alert({
              mes: "已成功加入购物车"
            });
            console.log(res.data.data)
          }
        })
      }
    }
  }

</script>

<style>
  .detail {
    height: 100%;
    position: fixed;
    width: 100%;
  }

  .detail .content-detail {
    margin-top: 13%;
    position: fixed;
    height: 85%;
    width: 100%;
    overflow-y: auto !important;
  }

  .detail .content-detail .ss {
    height: 100px;
    padding: 10px;
    background-color: #fff;
  }

  .detail .content-detail .ss img {
    float: left;
    height: 100%;
    margin-right: 5px;
  }

  .detailText {
    background-color: #fff;
  }

  .detailText .title {
    width: 85%;
    float: left;
    text-align: left;
    margin: 5px;
    font-weight: 600;
    font-size: 13px;
  }

  .detailText .text .yd-grids-3 {
    height: 40px;
  }

  .detail .content-detail .button-group {
    width: 65%;
    height: 32px;
  }

  .detail .content-detail .yd-btn {
    height: 32px;
    font-size: 14px;
  }

</style>
